<template>
  <div>

    <div class="header">
      <!-- 搜索 -->
      <el-input v-model="users.queryInfo.query" placeholder="请输入要搜索的用户名" clearable @keyup.enter="searchClick"
        @clear="searchClear" class="input">
        <template #prepend>用户名</template>
        <template #append>
          <el-button icon="Search" @click="searchClick" class="searchBtn" />
        </template>
      </el-input>
      <!-- 导出按钮 -->
      <el-button type="success" @click="exportExcel">导出用户数据</el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="users.addDialogVisible = true">添加用户</el-button>
    </div>

    <!-- 添加用户的 dialog 框 -->
    <el-dialog v-model="users.addDialogVisible" title="添加用户" width="50%" destroy-on-close>
      <!-- 表单 -->
      <el-form ref="addFormRef" :model="users.addInfo" label-position="top" status-icon>
        <el-form-item label="用户名" :rules="addRules.username" prop="username">
          <el-input v-model="users.addInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" :rules="addRules.password" prop="password">
          <el-input v-model="users.addInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :rules="addRules.email" prop="email">
          <el-input v-model="users.addInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" :rules="addRules.mobile" prop="mobile">
          <el-input v-model="users.addInfo.mobile"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="users.addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑用户的 dialog 框 -->
    <el-dialog v-model="users.editDialogVisible" title="编辑用户" width="50%">
      <!-- 表单 -->
      <el-form ref="editFormRef" :model="users.editUsers" :rules="editRules" label-position="top" status-icon>
        <el-form-item label="用户ID" prop="id">
          <el-input v-model="users.editUsers.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="users.editUsers.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="users.editUsers.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="users.editUsers.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="users.editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改角色的 Drawer 抽屉 -->
    <el-drawer v-model="users.editDrawer" title="修改角色" :direction="users.editDirection" size="50%">
      <!-- 表单 -->
      <el-form ref="editFormRef" :model="users.editRole" label-position="top">
        <el-form-item label="用户ID">
          <el-input v-model="users.editRole.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="users.editRole.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色RID">
          <el-input v-model="users.selectId" disabled></el-input>
        </el-form-item>
        <el-form-item label="修改角色">
          <!-- select 下拉选择框 -->
          <el-select v-model="users.selectId" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in users.rolesList" :key="item.id" :label="item.roleName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="users.editDrawer = false">取 消</el-button>
          <el-button type="primary" @click="editRole">确 定</el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import useStore from '@/pinia/index.js';

const emit = defineEmits(['exportExcel'])
const { users } = useStore();

// 表单对象
const addFormRef = ref();
const editFormRef = ref();
// 表单验证规则
const addRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '用户名长度在2~10个字符',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      max: 15,
      message: '密码长度在6~15个字符',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请输入正确的邮箱格式',
      trigger: 'blur'
    }
  ],
  mobile: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    {
      pattern: /^1[3|5|7|8|9]\d{9}$/,
      message: '请输入正确的号码格式',
      trigger: 'blur'
    }
  ]
})
const editRules = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请输入正确的邮箱格式',
      trigger: 'blur'
    }
  ],
  mobile: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    {
      pattern: /^1[3|5|7|8|9]\d{9}$/,
      message: '请输入正确的号码格式',
      trigger: 'blur'
    }
  ]
})

// 点击搜索按钮
const searchClick = () => {
  users.REQUEST_usersList();
  console.log("点击了搜索");
};
// 清空搜索框
const searchClear = () => {
  users.REQUEST_usersList();
  console.log("清空了搜索");
};

// 添加用户
const addUser = () => {
  addFormRef.value.validate(async (valid) => {
    if (valid) {
      let res = await users.REQUEST_usersAdd();
      if (res.data.meta.status === 201) {
        users.addDialogVisible = false;// 关闭弹出框
        users.REQUEST_usersList();// 等待添加执行完再重新获取用户列表
      } else {
        console.log(res.data.meta.msg);
      }
    }
    else {
      return console.log('表单验证不通过');
    }
  });
};
// 编辑用户
const editUser = () => {
  editFormRef.value.validate(async (valid) => {
    if (valid) {
      await users.REQUEST_usersEdit();
      // 等待编辑执行完再重新获取用户列表
      users.REQUEST_usersList();
      // 关闭弹出框
      users.editDialogVisible = false;
    }
    else {
      return console.log('表单验证不通过');
    }
  });
};
// 修改角色
const editRole = async () => {
  let res = await users.REQUEST_usersRole()
  if (res.data.meta.status == 200) {
    users.REQUEST_usersList()
    users.editDrawer = false
  }
}

// 导出excel
const exportExcel = () => {
  emit('exportExcel')
};
</script>

<style lang="less" scoped>
:deep(.el-button+.el-button) {
  margin-left: 0;
}

.header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.input {
  width: 100%;
}

.searchBtn {
  &:hover {
    color: black !important;
  }
}

.dialog-footer {
  button:first-child {
    margin-right: 12px;
  }
}
</style>